<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button style="padding: 0 10px" @click="OnDownload"> 下载 </a-button>
      <a-popconfirm title="确定通过吗?" @confirm="() => OnUpdata()">
        <a-button style="padding: 0 10px" type="primary"> 更新报表 </a-button>
      </a-popconfirm>

      <a-button style="padding: 0 10px" type="primary" @click="OnSave"> 保存 </a-button>
    </template>
    <div :class="{ isCheck: isCheck }">
      <div class="table-header">
        <span class="table-title">统计时间：</span>{{ model.year }}年（{{ model.quarter }}季度）
      </div>
      <a-table
        class="edit-list"
        ref="table"
        size="middle"
        bordered
        width="100vw"
        :pagination="false"
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{ x: 250, y: '70vh' }"
      >
        <template slot="officeName" slot-scope="officeName">
          <div style="width: 100%; height: 45px; overflow-x: hidden; overflow-y: auto">{{ officeName }}</div>
        </template>
        <template v-for="col in customRenderList" v-slot:[col]="text, record, index">
          <div :key="col" v-if="(col == 'traffic' || col == 'stay' || col == 'business') && !(record.xu == '合计')">
            <a-input-number
              class="inputnumber"
              :key="col"
              :disabled="disableSubmit"
              @change="handleChange(record, col)"
              v-model="record[col]"
            />
          </div>
          <div :key="col" v-else-if="record.xu == '合计'">
            {{ record[col] }}
          </div>
          <div :key="col" v-else>
            <a-input
              class="noborderInput"
              :key="col"
              :disabled="disableSubmit"
              @change="handleChange(record, col)"
              v-model="record[col]"
            />
          </div>
        </template>
      </a-table>
    </div>
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import columns from './columns'

export default {
  name: 'CheckAndEditModel',
  components: {},
  data() {
    return {
      disableSubmit: false,
      columns: columns(this),
      dataSource: [],
      title: '',
      model: {},
      visible: false,
      isCheck: false,
      officeId: '',
      customRenderList: ['name', 'time', 'traffic', 'stay', 'business'],
      url: {
        list: '/sjxxzhbb/sjAuditSummaryInfo/queryAuditSummaryDetailInfo',
        updata: '/sjxxzhbb/sjAuditSummaryInfo/generateReport',
        downLoad: '/sjxxzhbb/sjAuditSummaryInfo/exportAuditCostDetailInfo',
        save: '/sjxxzhbb/sjAuditSummaryInfo/saveSummary',
      },
    }
  },
  created() {},
  methods: {
    handleChange(row, col) {
      if (col === 'traffic' || col === 'stay' || col === 'business') {
        if (row[col] == '' || row[col] == null || row[col] == undefined) {
          row[col] = '0'
        }
        row['subtotal'] =
          parseFloat(row['traffic'] || '0') + parseFloat(row['stay'] || '0') + parseFloat(row['business'] || '0')
        this.setHj(col)
      }
    },
    setHj(col) {
      let rows = this.dataSource.length - 1
      let num = 0
      let hjNum = 0
      for (let i = 0; i < rows; i++) {
        num = num + parseFloat(this.dataSource[i][col])
        hjNum = hjNum + parseFloat(this.dataSource[i]['subtotal'])
      }
      this.dataSource[rows][col] = num
      this.dataSource[rows]['subtotal'] = hjNum
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.list()
    },
    list() {
      getAction(this.url.list, {
        id: this.model.id,
        type: '4',
      }).then((res) => {
        if (res.success && res.result) {
          this.officeId = res.result[0].officeId
          this.dataSource = res.result[0].costInfo
        } else {
          console.log(res)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.OnSave()
      } else {
        this.dataSource = []
        this.visible = false
      }
    },
    OnSave() {
      let string = JSON.stringify(this.dataSource)
      httpAction(this.url.save, { id: this.model.id, info: string, officeId: this.officeId }, 'put').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.dataSource = []
          this.$emit('ok')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    OnDownload() {
      getAction(this.url.downLoad, { id: this.model.id, type: '4' }).then((res) => {
        if (res.success && res.result) {
          this.$message.success('正在下载，请稍等！')
          let url = `${window._CONFIG['domianURL']}/sys/common/static${res.result}`
          window.open(url, '_blank')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    OnUpdata() {
      getAction(this.url.updata, {
        id: this.model.id,
        year: this.model.year,
        quarter: this.model.quarter,
        type: 4,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.list()
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../css/checkAndEdit.less';
@import '../css/baobiaotable.less';
.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
